<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findClicked" />
    <div class="flex mt10" style="width: 100%; background-color: white">
      <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }">
        <div class="flex">
          <h1 class="f16">订单船务作业</h1>
        </div>
        <Table
          @sortChange="sortChange"
          :tableHeader="tableHeader"
          :tableData="tableData"
          selection
          class="mt10"
          :isLoading="isLoading"
          @selectList="selectTableList"
          :summaryData="summaryData"
          summary
          @currentRow="currentRow"
          @currentRow1="dbCurrentRow"
          :outTableHeight="90"
        />
      </el-card>
    </div>
    <el-card shadow="never" :body-style="{ padding: '5px' }">
      <PageModule :PageData="{ total, buttonS: true }" @pageSizeChange="handleSizeChange" @pageChange="handleCurrentChange" />
    </el-card>

    <el-drawer v-model="drawer" :direction="'ttb'" size="small" :with-header="false">
      <span @click="drawer = false" style="float: right; cursor: pointer; color: rgb(7, 7, 7)">X</span>
      <div class="flex AIC" style="flex-direction: column">
        <div class="flex mt10 JCC" style="width: 100%; background-color: white">
          <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }" style="width: 100%">
            <div class="flex">
              <h1 class="f16">出货明细查询</h1>
            </div>
            <Table
              :tableHeader="tableHeader10"
              :tableData="tableData10"
              class="mt10"
              :isLoading="isLoading10"
              :outTableHeight="150"
              @confirmChange="confirmChange10"
              @currentRow="currentRow10"
            />
            <el-card shadow="never" :body-style="{ padding: '5px' }">
              <PageModule :PageData="{ total: total10, buttonS: true }" @pageSizeChange="handleSizeChange10" @pageChange="handleCurrentChange10" />
            </el-card>
          </el-card>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script lang="ts">
import { Delete, Edit, Search, Share, Upload, Plus, HotWater } from '@element-plus/icons-vue'
import { defineComponent } from 'vue'
import formDataReq from '@/utils/formDataReq'
import LoginWork from '@/utils/LoginWork'
import { formateData } from '@/plugins/mixinJ'
import { selectList, selectSomeList } from '@/plugins/mixin'
import fileRequest from '@/utils/fileRequest'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'ShippingSearch'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import service from '@/utils/request'
import { debounce } from 'lodash'
import { onMounted, watch } from 'vue'
const drawer3 = ref(false)
const dialogVisible = ref(false)

const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '发票号',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '工厂',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'input',
    inputPlaceholder: '工厂指令',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'date',
    dateLabel: '出货日期',
    dateValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '类型',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'input',
    inputPlaceholder: '客人发票号',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'input',
    inputPlaceholder: '报关发票号',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'input',
    inputPlaceholder: '起运港-目的港',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '出口类型',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'dateSingle',
    dateLabel: '船期',
    dateValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '信用证号',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'dateSingle',
    dateLabel: '交单日期',
    dateValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '状态',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'input',
    inputPlaceholder: '请输入品牌',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入季度',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'button',
    checkboxLabel: '搜索'
  },
  {
    type: 'button',
    checkboxLabel: '导出'
  }
]) as any
// 表一模块
const tableHeader = ref([
  {
    change: true,
    prop: 'custom',
    label: '品牌'
  },
  {
    change: true,
    prop: 'season',
    label: '季节'
  },
  {
    sortable: 'custom',
    change: true,
    prop: 'orderType',
    label: '类型'
  },
  {
    sortable: 'custom',
    change: true,
    width: '120',
    prop: 'invoiceNo',
    label: '发票号'
  },
  {
    sortable: 'custom',
    change: true,
    prop: 'outDate',
    label: '出厂日期'
  },
  {
    sortable: 'custom',
    change: true,
    prop: 'currency',
    label: '币种'
  },
  {
    sortable: 'custom',
    change: true,
    prop: 'outPair',
    label: '出货数量'
  },
  {
    sortable: 'custom',
    change: true,
    prop: 'premium',
    label: '添加港口单价'
  },
  {
    sortable: 'custom',
    change: true,
    prop: 'outAmt',
    label: '出货金额'
  },
  {
    sortable: 'custom',
    change: true,
    prop: 'additionalCost',
    label: '附加费用'
  },
  {
    sortable: 'custom',
    change: true,
    width: '120',
    prop: 'customsInvNo',
    label: '报关发票号'
  },
  {
    sortable: 'custom',
    change: true,
    width: '120',
    prop: 'custInvNo',
    label: '客人发票号'
  },
  {
    sortable: 'custom',
    change: true,
    prop: 'destPort',
    label: '起运港-目的港'
  },
  {
    sortable: 'custom',
    change: true,
    prop: 'exportType',
    label: '出口类型'
  },
  {
    sortable: 'custom',
    change: true,
    prop: 'shipDate',
    label: '船期'
  },
  {
    sortable: 'custom',
    change: true,
    prop: 'payDays',
    label: '账期'
  },
  {
    sortable: 'custom',
    change: true,
    prop: 'arDate',
    label: '应收款日期'
  },
  {
    sortable: 'custom',
    change: true,
    prop: 'arType',
    label: '收款类型'
  },
  {
    sortable: 'custom',
    change: true,
    prop: 'arAmt',
    label: '收款金额'
  },
  {
    sortable: 'custom',
    change: true,
    prop: 'remark',
    label: '备注'
  },
  {
    sortable: 'custom',
    change: true,
    width: '120',
    prop: 'creditNo',
    label: '信用证号'
  },
  {
    sortable: 'custom',
    change: true,
    prop: 'deliveryDate',
    label: '交单日期'
  },
  {
    disable: false,
    type: 'checkbox',
    prop: 'cfmFlag',
    label: '检核'
  },
  {
    sortable: 'custom',
    change: true,
    prop: 'sysUser',
    label: '建档人员'
  },
  {
    sortable: 'custom',
    change: true,
    prop: 'sysDate',
    label: '建档日期'
  }
])
// 表一按钮
const findClicked = async (content: string) => {
  if (content === '置空') {
    formList.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
    })
  }
  if (content === '搜索') {
    getTableList()
  }
  if (content === '导出') {
    const res = (await fileRequest.post(`/board/downloadBoard`, {
      startDate:
        formList.value.find((item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '出货日期')
          .dateValue?.[0] || '',
      endDate:
        formList.value.find((item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '出货日期')
          ?.dateValue?.[1] || '',
      invoiceNo: formList.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '发票号'
      )?.inputValue,
      custom: formList.value
        .find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '工厂')
        ?.selectValue.split(' ')[0],
      factoryLotNo: formList.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '工厂指令'
      )?.inputValue,
      orderType: formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '类型')
        ?.selectValue,
      custInvNo: formList.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '客人发票号'
      )?.inputValue,
      customsInvNo: formList.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '报关发票号'
      )?.inputValue,
      destPort: formList.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '起运港-目的港'
      )?.inputValue,
      exportType: formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '出口类型')
        ?.selectValue,
      shipDate: formList.value.find((item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '船期')
        ?.dateValue,
      creditNo: formList.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '信用证号'
      )?.inputValue,
      deliveryDate: formList.value.find(
        (item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '交单日期'
      )?.dateValue,
      cfmFlag: formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '状态')
        ?.selectValue,
      brand: formList.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入品牌'
      )?.inputValue,
      season: formList.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入季度'
      )?.inputValue,
      pageNum: currentPage.value,
      pageSize: pageSize.value
    })) as any
    const link = document.createElement('a') // 利用a标签自定义下载文件名
    let blob = new Blob([res.data]) // 创建Blob对象，设置文件类型
    link.style.display = 'none'
    //设置连接
    link.href = window.URL.createObjectURL(blob)
    const FileName = decodeURI(res.headers['content-disposition'].split(`utf-8''`)[1])
    link.download = FileName //自定义文件名字
    document.body.appendChild(link)
    //模拟点击事件
    link.click()
    document.body.removeChild(link)
  }
}
const tableData = ref([]) as any
const isLoading = ref(true)
// 总计
interface summaryDataType {
  index: number
  num: number | undefined
}
const summaryData = ref<summaryDataType[]>([
  {
    index: 8,
    num: 0
  },
  {
    index: 10,
    num: 0
  },
  {
    index: 11,
    num: 0
  },
  {
    index: 21,
    num: 0
  }
])
// 分页器
const currentPage = ref(1)
const pageSize = ref(40)
const total = ref(0)
const handleSizeChange = (val: number) => {
  pageSize.value = val
  getTableList()
}
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getTableList()
}
const order = ref('')
const prop = ref('')
const sortChange = (sort: any, prop2: any, column: any) => {
  switch (column.label) {
    case '类型':
      prop.value = '1'
      break
    case '发票号':
      prop.value = '2'
      break
    case '出厂日期':
      prop.value = '3'
      break
    case '币种':
      prop.value = '4'
      break
    case '出货数量':
      prop.value = '5'
      break
    case '添加港口单价':
      prop.value = '6'
      break
    case '出货金额':
      prop.value = '7'
      break
    case '附加费用':
      prop.value = '8'
      break
    case '报关发票号':
      prop.value = '9'
      break
    case '客人发票号':
      prop.value = '10'
      break
    case '起运港-目的港':
      prop.value = '11'
      break
    case '出口类型':
      prop.value = '12'
      break
    case '船期':
      prop.value = '13'
      break
    case '账期':
      prop.value = '14'
      break
    case '应收款日期':
      prop.value = '15'
      break
    case '收款类型':
      prop.value = '16'
      break
    case '备注':
      prop.value = '17'
      break
    case '信用证号':
      prop.value = '18'
      break
    case '交单日期':
      prop.value = '19'
      break
    case '建档人':
      prop.value = '20'
      break
    case '建档日期':
      prop.value = '21'
      break
    case '收款金额':
      prop.value = '22'
      break
    default:
      order.value = ''
  }
  if (sort === 'ascending') {
    order.value = '1'
  } else if (sort === 'descending') {
    order.value = '2'
  } else {
    order.value = ''
  }
  getTableList()
}
const showJDialog = ref(false)
// 获取表数据
const getTableList = debounce(async () => {
  isLoading.value = true
  let tableDataList = await LoginWork.post<any, any>('/board/queryBoard', {
    startDate:
      formList.value.find((item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '出货日期')
        .dateValue?.[0] || '',
    endDate:
      formList.value.find((item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '出货日期')
        ?.dateValue?.[1] || '',
    invoiceNo: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '发票号'
    )?.inputValue,
    custom: formList.value
      .find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '工厂')
      ?.selectValue.split(' ')[0],
    factoryLotNo: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '工厂指令'
    )?.inputValue,
    orderType: formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '类型')
      ?.selectValue,
    custInvNo: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '客人发票号'
    )?.inputValue,
    customsInvNo: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '报关发票号'
    )?.inputValue,
    destPort: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '起运港-目的港'
    )?.inputValue,
    exportType: formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '出口类型')
      ?.selectValue,
    shipDate: formList.value.find((item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '船期')
      ?.dateValue,
    creditNo: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '信用证号'
    )?.inputValue,
    deliveryDate: formList.value.find(
      (item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '交单日期'
    )?.dateValue,
    cfmFlag: formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '状态')
      ?.selectValue,
    brand: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入品牌'
    )?.inputValue,
    season: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入季度'
    )?.inputValue,
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    order: order.value,
    orderBy: prop.value
  })
  isLoading.value = false
  tableData.value = tableDataList.data.list.map((item: any) => {
    if (item.cfmFlag === 'Y') {
      item.cfmFlag = true
    } else {
      item.cfmFlag = false
    }
    return item
  })
  total.value = tableDataList.data.total
  summaryData.value[0].num = tableDataList.data.summaryRoot.outPair
  summaryData.value[1].num = tableDataList.data.summaryRoot.outAmt
  summaryData.value[2].num = tableDataList.data.summaryRoot.additionalCost
  summaryData.value[3].num = tableDataList.data.summaryRoot.arAmt
  currentRow()
}, 500)
onMounted(() => {
  getTableList()
})
watch(
  () =>
    formList.value.map((item: any) => {
      item.selectValue, item.inputValue, item.dateValue, item.checked
    }),
  () => {
    getTableList()
  }
)
// 点击表给另一张表传数据
const currentTableRow = ref({}) as any
const currentRow = async (row: any = tableData.value[0] ? tableData.value[0] : {}) => {
  currentTableRow.value = row
  row.cfmFlag === false ? (showJDialog.value = true) : (showJDialog.value = false)
}
const selectedLists = ref([])
const selectTableList = (selectedList: any) => {
  selectedLists.value = selectedList
}

// 双击当前行
const isLoading10 = ref(false)
// 分页器
const currentPage10 = ref(1)
const pageSize10 = ref(40)
const total10 = ref(0)
const handleSizeChange10 = (val: number) => {
  pageSize10.value = val
  getTableList10()
}
const handleCurrentChange10 = (val: number) => {
  currentPage10.value = val
  getTableList10()
}
const dbCurrentRowTable10 = ref({})
const dbCurrentRow = async (row: any) => {
  dbCurrentRowTable10.value = row
  drawer.value = true
  getTableList10()
}
const getTableList10 = async () => {
  isLoading10.value = true
  let tableDataList = await LoginWork.post<any, any>('/board/queryBoardDetail', {
    ...dbCurrentRowTable10.value,
    pageNum: currentPage10.value,
    pageSize: pageSize10.value
  })
  tableData10.value = tableDataList.data.list.map((item: any) => {
    return item
  })
  total10.value = tableDataList.data.total
  isLoading10.value = false
}
// 修改出货明细加价
const confirmChange10 = async (row: any) => {
  const res = (await LoginWork.post<any, any>('/board/editBoardDetail', row)) as any
  if (res.code === 200) {
    JMessage.success('修改成功')
  } else {
    JMessage.error(res.message)
  }
  getTableList10()
}

const drawer = ref(false)
const tableHeader10 = ref([
  {
    label: '客人PI',
    prop: 'customPiNo'
  },
  {
    label: '工厂',
    prop: 'factory'
  },
  {
    label: '工厂指令',
    prop: 'factoryLotNo'
  },
  {
    label: '订单数量',
    prop: 'orderQty'
  },
  {
    width: '120',
    label: '柜号',
    prop: 'containerNo'
  },
  {
    label: '出货数量',
    prop: 'outQty'
  },
  {
    label: '单价',
    prop: 'custPrice'
  },
  {
    width: '160',
    type: 'number',
    label: '加价',
    prop: 'addPrice'
  },
  {
    label: '币种',
    prop: 'factoryCur'
  },
  {
    label: '金额',
    prop: 'amount'
  },
  {
    label: '型体',
    prop: 'styleNo'
  },
  {
    label: '颜色',
    prop: 'colorName'
  },
  {
    label: '颜色代号',
    prop: 'colorCode'
  },
  {
    label: '品牌',
    prop: 'brand'
  },
  {
    label: '鞋名',
    prop: 'styleName'
  },
  {
    label: '客户型体',
    prop: 'custStyle'
  },
  {
    label: '季度',
    prop: 'season'
  },
  {
    label: '交期',
    prop: 'deliveryDate'
  }
])
const tableData10 = ref([]) as any
const currentTable10Row = ref({}) as any
const currentRow10 = async (row: any = tableData10.value[0]) => {
  currentTable10Row.value = row
}

const getSelectList = async () => {
  const res = (await LoginWork.post('/subcontract/static/oem/combo')) as any
  formList12.value[2].selectOptions = res.data.map((item: any) => {
    return {
      optionKey: item.vendorAbbr,
      optionValue: `${item.vendorAbbr}`,
      optionLabel: item.vendorAbbr
    }
  })
  formList12.value[5].selectOptions = res.data.map((item: any) => {
    return {
      optionKey: item.vendorAbbr,
      optionValue: `${item.vendorAbbr}`,
      optionLabel: item.vendorAbbr
    }
  })
  formList.value[1].selectOptions = res.data.map((item: any) => {
    return {
      optionKey: item.vendorAbbr,
      optionValue: `${item.vendorAbbr}  ${item.vendorNo}`,
      optionLabel: item.vendorAbbr
    }
  })
  formList.value[4].selectOptions.push(
    {
      optionKey: '全部',
      optionValue: '',
      optionLabel: '全部'
    },
    {
      optionKey: '大货',
      optionValue: '大货',
      optionLabel: '大货'
    },
    {
      optionKey: '样品',
      optionValue: '样品',
      optionLabel: '样品'
    },
    {
      optionKey: '其他',
      optionValue: '其他',
      optionLabel: '其他'
    }
  )
  formList.value[8].selectOptions.push(
    {
      optionKey: '全部',
      optionValue: '',
      optionLabel: '全部'
    },
    {
      optionKey: '自营出口',
      optionValue: '自营出口',
      optionLabel: '自营出口'
    },
    {
      optionKey: '代理商出口',
      optionValue: '代理商出口',
      optionLabel: '代理商出口'
    },
    {
      optionKey: '国内',
      optionValue: '国内',
      optionLabel: '国内'
    }
  )
  formList.value[12].selectOptions.push(
    {
      optionKey: '全部',
      optionValue: '',
      optionLabel: '全部'
    },
    {
      optionKey: '已检核',
      optionValue: 'Y',
      optionLabel: '已检核'
    },
    {
      optionKey: '未检核',
      optionValue: 'N',
      optionLabel: '未检核'
    }
  )
}
onMounted(() => {
  getSelectList()
})

// 其他费用模块
const formList12 = ref([
  {
    type: 'input',
    inputPlaceholder: '费用单号',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'input',
    inputPlaceholder: '客人发票号',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '工厂',
    selectLabel: '',
    selectOptions: [] as any
  },
  {
    type: 'selectJ',
    selectValue: '',
    selectP: '供应商',
    selectLabel: '',
    selectOptions: [] as any
  },
  {
    type: 'selectJ',
    selectValue: '',
    selectP: '费用类型',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '责任工厂',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'checkbox',
    checkboxLabel: '未检核',
    checked: true
  },
  {
    type: 'checkbox',
    checkboxLabel: '已检核',
    checked: true
  },
  {
    type: 'dateMonth',
    dateLabel: '核销月份',
    dateValue: ''
  },
  {
    type: 'checkbox',
    checkboxLabel: '我的',
    checked: true
  },
  {
    type: 'checkbox',
    checkboxLabel: '全部',
    checked: false
  },
  {
    type: 'button',
    checkboxLabel: '导入'
  },
  {
    type: 'button',
    checkboxLabel: '导出'
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  }
])
// 表三模块
const tableData12 = ref([])
const isLoading12 = ref(true)
// 总计
interface summaryDataType {
  index: number
  num: number | undefined
}
const summaryData12 = ref<summaryDataType[]>([
  {
    index: 4,
    num: 0
  },
  {
    index: 7,
    num: 0
  },
  {
    index: 9,
    num: 0
  }
])
// 分页器
const currentPage12 = ref(1)
const pageSize12 = ref(40)
const total12 = ref(0)
// 表格计算函数
const cfmFlag12 = () => {
  const Unaudited = formList12.value.find((item: any) => item.type === 'checkbox' && i18n.global.t(item.checkboxLabel) === '未检核')
  const Audited = formList12.value.find((item: any) => item.type === 'checkbox' && i18n.global.t(item.checkboxLabel) === '已检核')
  if (!Unaudited || !Audited) return
  if (Unaudited.checked && Audited.checked) {
    return ''
  } else if (Unaudited.checked) {
    return 'N'
  } else if (Audited.checked) {
    return 'Y'
  } else {
    ElMessage('必须至少选择一项')
    Unaudited.checked = true
    Audited.checked = true
    return ''
  }
}
const cfmFlag13 = () => {
  const Unaudited = formList12.value.find((item: any) => item.type === 'checkbox' && i18n.global.t(item.checkboxLabel) === '我的')
  const Audited = formList12.value.find((item: any) => item.type === 'checkbox' && i18n.global.t(item.checkboxLabel) === '全部')
  if (!Unaudited || !Audited) return
  if (Unaudited.checked && Audited.checked) {
    return ''
  } else if (Unaudited.checked) {
    return '1'
  } else if (Audited.checked) {
    return ''
  } else {
    ElMessage('必须至少选择一项')
    Unaudited.checked = true
    Audited.checked = true
    return ''
  }
}
// 获取表数据
const getTableList12 = debounce(async () => {
  isLoading12.value = true
  let tableDataList = await service.post<any, any>('/other/loadInSumList', {
    amount: '',
    aoaMonth: formList12.value.find(
      (item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '核销月份'
    )?.dateValue,
    cfmDate: '',
    cfmUser: '',
    chargesNo: formList12.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '费用单号'
    )?.inputValue,
    chargesType: formList12.value.find(
      (item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '费用类型'
    )?.selectValue,
    companyId: '',
    createDate: '',
    createUser: '',
    custInvNo: formList12.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '客人发票号'
    )?.inputValue,
    dutyAmount: '',
    dutyFactory: formList12.value.find(
      (item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '责任工厂'
    )?.selectValue,
    factoryName: formList12.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '工厂')
      ?.selectValue,
    factoryNo: '',
    outNum: '',
    remark: '',
    rowId: '',
    supplierName: formList12.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '供应商')
      ?.selectValue,
    supplierNo: '',
    brand: formList12.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '品牌')
      ?.selectValue,
    color: formList12.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入颜色'
    )?.inputValue,
    deliveryEndDate: formList12.value.find(
      (item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '交期'
    )?.dateValue?.[1],
    deliveryStartDate: formList12.value.find(
      (item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '交期'
    )?.dateValue?.[0],
    lotNo: formList12.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入指令'
    )?.inputValue,
    pageNum: currentPage12.value,
    pageSize: pageSize12.value,
    cfmFlag: cfmFlag12(), //
    isMines: cfmFlag13()
  })
  isLoading12.value = false
  tableData12.value = tableDataList.list.map((item: any) => {
    if (item.cfmFlag === 'Y') {
      item.cfmFlag = true
    } else {
      item.cfmFlag = false
      item.addAndUpdate = true
    }
    item.change = 'Y'
    return item
  })
  total12.value = tableDataList.total
  // currentRow12()
  summaryData12.value[0].num = tableDataList.summaryRoot.outNum
  summaryData12.value[1].num = tableDataList.summaryRoot.amount
  summaryData12.value[2].num = tableDataList.summaryRoot.dutyAmount
}, 500)
onMounted(() => {
  getTableList12()
})
watch(
  () =>
    formList12.value.map((item: any) => {
      item.selectValue, item.inputValue, item.dateValue, item.checked
    }),
  () => {
    getTableList12()
  }
)
</script>

<!-- 复制的AppMain.vue样式 -->
<style lang="less" scoped>
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.button-group {
  display: flex;
  align-items: center;
  margin-left: -50px;
}

.tablet-margin {
  margin-left: 10px;
  /* Add left margin for buttons on tablet */
}

@media screen and (max-width: 768px) {
  .header-container {
    flex-direction: column;
    /* Stack elements vertically on mobile */
    align-items: flex-start;
    /* Align items to the left on mobile */
  }

  .button-group {
    margin-top: 10px;
    /* Add top margin for button group on mobile */
    margin-left: 1px;
    display: flex;
    flex-wrap: wrap;
  }

  .demo-datetime-picker {
    margin-top: 10px;
    margin-left: 2px !important;
  }

  .tablet-margin {
    margin-left: 0;
    /* Remove left margin on mobile and tablet */
    margin-top: 5px;
    /* Add top margin for buttons on mobile */
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .button-group {
    margin-top: 10px;
    /* Add top margin for button group on mobile */
    margin-left: 1px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .tablet-margin {
    margin-top: 10px;
  }

  .demo-datetime-picker {
    margin-top: 10px;
    margin-left: 2px !important;
  }
}

@media screen and (min-width: 768px) and (max-width: 1180px) {
  .button-group {
    margin-top: 10px;
    /* Add top margin for button group on mobile */
    margin-left: 1px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .tablet-margin {
    margin-top: 10px;
  }

  .demo-datetime-picker {
    margin-top: 10px;
    margin-left: 2px !important;
  }
}

.card-container {
  display: flex;
}

.card-item {
  width: 25%;
  /* Three cards per row, accounting for margins */
  margin: 0 5px 10px;
  /* Add margin to all sides of the card */
  box-sizing: border-box;
  /* Include padding and border in the width */
}

.item {
  width: 100%;
  /* Three cards per row, accounting for margins */
  margin: 0 5px 10px;
  /* Add margin to all sides of the card */
  box-sizing: border-box;
  /* Include padding and border in the width */
  height: 513px;
}

.carditem {
  width: 33.33%;
  /* Three cards per row, accounting for margins */
  margin: 0 5px 10px;
  /* Add margin to all sides of the card */
  box-sizing: border-box;
  /* Include padding and border in the width */
}

@media screen and (max-width: 1024px) {
  .card-container {
    display: flex;
    flex-wrap: wrap !important;
  }

  .card-item {
    width: 100%;
    /* Two cards per row on tablet */
  }

  .item {
    width: 100%;
    /* Two cards per row on tablet */
  }

  .carditem {
    width: 100%;
    /* Two cards per row on tablet */
  }
}

@media screen and (max-width: 768px) {
  .card-container {
    display: flex;
    flex-wrap: wrap !important;
  }

  .card-item {
    width: 100%;
    /* One card per row on mobile */
  }

  .item {
    width: 100%;
    /* Two cards per row on tablet */
  }

  .carditem {
    width: 100%;
    /* Two cards per row on tablet */
  }
}

.active {
  background-color: #0058ff;
  color: white;
}

:deep(.el-button) {
  border: none;
}

.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.home {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;

  /* background-color: #ddd; */
  img {
    width: 370px;
    height: 82px;
  }

  .title {
    font-size: 72px;
    margin-top: 41px;
    font-family: Segoe UI-Semibold, Segoe UI;
    font-weight: 600;
    color: #0e0d22;
  }

  button {
    width: 258px;
    height: 46px;
    background: #f89027;
    border: 0;
    border-radius: 3px 3px 3px 3px;
    opacity: 1;
    margin-top: 62px;
    color: white;
    font-size: 16px;
    font-family: PingFang SC-Regular, PingFang SC;
  }

  p {
    font-size: 14px;
    font-family: PingFangSC-Regular-, PingFangSC-Regular;
    color: #989898;
    margin-top: 20px;
  }
}

.app-main {
  /*50 = navbar  */
  padding: 24px;
  min-height: calc(100vh - 50px);
  width: 100%;
  position: relative;
  overflow: hidden;
  padding-bottom: 0;
}

.fixed-header + .app-main {
  padding-top: 107px;
}
</style>

<style lang="scss">
// fix css style bug in open el-dialog
.el-popup-parent--hidden {
  .fixed-header {
    padding-right: 15px;
  }
}
</style>
<style lang="less" scoped></style>
